<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符 '.prevent' & '.stop'</title>
    <link href="../image/favicon.ico" rel="shortcut icon">
    <script src="../lib/vue-2.6.12.js"></script>
    <style>
        .box{
            height: 150px;
            background-color: aqua;
            padding-left: 100px;
            line-height: 150px;
        }
    </style>
</head>
<body>
<!--事件修饰符:-->
<!--.prevent  阻止默认行为-->
<!--.stop     阻止事件冒泡-->

    <div id="app">
        <!-- <a href="http://www.baidu.com" @click="show">百度一下，你就知道</a>-->
        <!-- 使用事件修饰符-->
        <a href="http://www.baidu.com" @click.prevent="show">百度一下，你就知道</a>

        <hr>
        <div class="box" @click="divHandler">
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                // show(e){
                //     // 阻止默认网页跳转
                //     e.preventDefault()
                //     console.log('点击了 a')
                // }
                show(){
                    console.log('点击了 a')
                },
                // 阻止事件冒泡
                btnHandler(){
                    console.log('btnHandler')
                },
                divHandler(){
                    console.log('divHandler')
                }
            }
        })
    </script>
</body>
</html>